<template>
    <div class="order">
        <van-nav-bar title="我的订单" left-text="" left-arrow @click-left="goback" />
        <TopBarVue></TopBarVue>
        <div class="wrapper">
            <div v-show="isLogin">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list
                        v-model:loading="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <van-cell v-for="item in orderData" :key="item.id">
                            <SinOrderVue :orderData="item" @goDel="deleteHandler"></SinOrderVue>
                        </van-cell>
                    </van-list>
                </van-pull-refresh>
            </div>
            <van-empty image="search" description="请先登录" v-show="!isLogin" />
        </div>
        <DockerVue :navActive="navActive"></DockerVue>
    </div>
</template>

<script>
export default {
    // 给组件起名字
    // 想组件缓存就得起名
    name: 'order',
};
</script>

<script setup>
import SinOrderVue from './components/SinOrder.vue';
import DockerVue from '@/components/Docker.vue';
import { requestDel, requestGet } from '@/utils/Request';
import { useStore } from 'vuex';
import { ref, computed, reactive } from 'vue';
import { useRouter } from 'vue-router';
const navActive = ref(2);
const store = useStore();
const router = useRouter();
const isLogin = computed(() => store.state.user.isLogin);
const token = store.state.user.token;
let pages = 1;
let res = '';
let orderData = ref([]);
const goback = () => {
    store.commit('changeRouterType', 'back');
    router.back();
};

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = async () => {
    if (refreshing.value) {
        orderData.value = [];
        refreshing.value = false;
    }
    pages++;
    await getOrderList(pages);
    if (res.data.result.rows.length > 0) {
        orderData.value = orderData.value.concat(res.data.result.rows);
        loading.value = false;
    }

    if (res.data.result.rows.length <= 0) {
        finished.value = true;
    }
};
// 下拉刷新触发的函数
const onRefresh = () => {
    finished.value = false;
    loading.value = true;
    pages = 0;
    onLoad();
};
const getOrderList = async page => {
    res = await requestGet(`/order?project_id=238&page=${page}&limit=5`, token);
    if (res.data.result.rows.length > 0) {
        res.data.result.rows.forEach(ele => {
            ele['order_Status'] = '';
            ele['goods_msg'] = {};
            ele['total_num'] = 0;
            if (ele.status == '-1') {
                ele.order_Status = '已删除';
            } else if (ele.status == '0') {
                ele.order_Status = '已过期';
            } else if (ele.status == '1') {
                ele.order_Status = '已下单';
            } else if (ele.status == '2') {
                ele.order_Status = '已支付';
            } else if (ele.status == '3') {
                ele.order_Status = '已发货';
            } else if (ele.status == '4') {
                ele.order_Status = '退货中';
            } else if (ele.status == '5') {
                ele.order_Status = '退款中';
            } else if (ele.status == '6') {
                ele.order_Status = '已完成';
            } else if (ele.status == '7') {
                ele.order_Status = '已取消';
            }
            ele.goods_msg = JSON.parse(ele.goods_info);
            ele.total_num = ele.goods_msg.reduce((sum, ele) => (sum += ele.sold_num), 0);
        });
    }
};
const deleteHandler = async item => {
    let id = item.id;
    await requestDel(`/order/${id}`, token);
    getOrderList(pages);
    orderData.value = res.data.result.rows;
};
if (token) {
    (async () => {
        await getOrderList(pages);
        orderData.value = res.data.result.rows;
        console.log(orderData.value);
    })();
}
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background-color: #f1f1f1;
    overflow-y: scroll;
    .van-cell {
        background-color: #f1f1f1;
    }
}
</style>
